import React, {Component} from 'react'

class List extends Component {
    constructor(props){
      super(props)
      this.state={
         data:[]
      }
    }

   componentDidMount() {
     this.asyncPostMockList()
   }
  asyncPostMockList() {
    const mockUrl = "http://mock.52react.cn/mock/5db1ba8d8e0c626e95d4170e/v1/list"
    fetch(mockUrl).then(res=>
        res.json()
    ).then(data=>{
       if(data.success){
         this.setState({
           data:data.data.papers
         })
       }
    })
  }

  render() {
    console.log('data',this.state.data)
    const {data} = this.state
    return (
      <div>
          <ul>
            {
              data.map(item=>(
                 <ListItem item={item}/>
              ))
            }
          </ul>
      </div>
    )
  }
}

class ListItem extends Component{
  constructor(props) {
    super(props)
  }
  render() {
    const {title,questions} = this.props.item
    return (
       <li>
           <div>{title}</div>
            <h3>questions:</h3>
            <ul>
              {
                questions.map(child=>
                   <ChildItem child={child}/>
                )
              }

            </ul>
       </li>
    )
  }
}


class ChildItem extends Component{
  constructor(props) {
    super(props)
  }
  render() {
    const {title,options} = this.props.child
    return (
      <li>
        <div>{title}</div>
        <h3>Childoptions:</h3>
        <ul>
          {
            options.map(item=>{
              return <li>{item.id}</li>
            })
          }
        </ul>

      </li>
    )
  }
}




export default List